<!--  -->
<template>
  <div class="user_comment">
    <div v-if="comments.length>0" class="item_wrap">
      <div v-for="(item,index) in comments" :key="index" class="item">
        <div @click="toUser(item.user.userId)" class="cover">
          <img :src="item.user.avatarUrl" alt="">
        </div>
        <div class="info">
          <div class="head">
            <div class="user_name">{{item.user.nickname}}</div>
            <div class="time">{{item.time | dateFormats }}</div>
          </div>
          <div class="response">回复我：{{item.content}}</div>
          <div class="response_info">
            {{item.beRepliedContent}}
          </div>
          <div class="res_btn">
            <el-button @click="handlebtn(index)" type="text" icon="el-icon-chat-line-square">回复</el-button>
            <div v-show="index==isActive" class="response_message">
              <el-input :autofocus="true" type="textarea" :rows="2" v-model="response_message">
              </el-input>
              <div class="res_btn_children">
                <el-button @click="sendComment(item.resourceType,JSON.parse(item.resourceJson),item.parentCommentId)" round>发送</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="kong">
      <el-empty description="暂无评论信息"></el-empty>
    </div>
  </div>
</template>

<script>
import { getUserComment } from '@/util/login.js'
import { mapGetters } from 'vuex'
import { sendComment } from '@/util/songListPage.js'
export default {
  name: 'UserComment',
  data() {
    return {
      time: null,
      comments: [],
      response_message: '',
      isActive: null
    }
  },
  computed: {
    ...mapGetters('userInfo', [
      //登录状态
      'loginStatus',
      'userId'
    ])
  },
  created() {
    this.getUserComment()
  },
  methods: {
    //回复按钮事件
    handlebtn(index) {
      if (index !== this.isActive) {
        this.isActive = index
      } else {
        this.isActive = null
      }
    },
    //获取评论信息
    async getUserComment() {
      let { data } = await getUserComment(this.userId, 20, this.time)
      //   console.log(data)
      this.comments = data.comments
    },
    //回复评论
    async sendComment(type, resourceJson, parentCommentId) {
      switch (type) {
        case 4:
          type = 0
          break
        case 62:
          type = 5
          break
        case 0:
          type = 2
          break
        case 5:
          type = 1
          break
        case 3:
          type = 3
          break
        case 2:
          type = 6
          break
      }
      //   console.log(resourceJson.id)
      let { data } = await sendComment(2, type, resourceJson.id, this.response_message, parentCommentId)
      //   console.log(data)
      if (data.code == 200) {
        this.$message({
          message: '回复成功'
        })
      } else {
        // console.log('ppppp')
      }
      this.response_message = ''
      this.isActive = null
    },
    //跳转用户信息
    toUser(id) {
      this.$router.push('/userInfo/' + id)
    }
  }
}
</script>

<style scoped lang="less">
.item_wrap {
  .item {
    display: flex;
    border-bottom: 1px solid #f2f2f2;
    padding: 20px 0 2px 0;
    // width: 100%;
    .cover {
      margin-right: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #ddd;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      flex: 1;
      width: 100%;
      .head {
        display: flex;
        justify-content: space-between;
        .user_name {
          font-size: 12px;
          color: #507daf;
        }
        .time {
          font-size: 12px;
          color: #cccccc;
        }
      }
      .response {
        padding: 6px 0;
        font-size: 12px;
      }
      .response_info {
        padding: 5px 8px;
        background-color: #f4f4f4;
        border-radius: 6px;
        font-size: 12px;
        line-height: 2;
      }
      .res_btn {
        margin-top: 15px;
        width: 100%;
        .el-button {
          color: #666666;
          float: right;
          font-size: smaller;
        }
        .el-button:hover {
          color: #333;
        }
        .res_btn_children {
          margin: 15px 0;
          .el-button {
            padding: 7px 16px;
          }
        }
      }
    }
  }
}
</style>